import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { NavLink, useNavigate } from 'react-router-dom'
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { getUserSync } from '@/store/actions/profile'
import type { User, UserAction } from '@/types/user'

const Profile = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  useEffect(() => {
    // 自调用匿名回调函数：目的是构建一个函数方便添加asyn和await搭配
    ;(async () => {
      try {
        await dispatch(getUserSync() as unknown as UserAction)
      } catch {}
    })()
  }, [dispatch])
  // 从redux中获取用户个人数据
  const res = useSelector(
    (state: { profile: { user: User } }) => state.profile
  ).user

  return (
    <div className={styles.root}>
      <div className="profile">
        {/* 顶部个人信息区域 */}
        <div className="user-info">
          <div className="avatar">
            <img src={res?.photo} alt="" />
          </div>
          <div className="user-name">{res?.intro}</div>
          <NavLink to="/profile/edit">
            个人信息 <Icon type="iconbtn_right" />
          </NavLink>
        </div>

        {/* 今日阅读区域 */}
        <div className="read-info">
          <Icon type="iconbtn_readingtime" />
          今日阅读 <span>10</span> 分钟
        </div>

        {/* 统计信息区域 */}
        <div className="count-list">
          <div className="count-item">
            <p>{res?.art_count}</p>
            <p>动态</p>
          </div>
          <div className="count-item">
            <p>{res?.follow_count}</p>
            <p>关注</p>
          </div>
          <div className="count-item">
            <p>{res?.fans_count}</p>
            <p>粉丝</p>
          </div>
          <div className="count-item">
            <p>{res.like_count}</p>
            <p>被赞</p>
          </div>
        </div>

        {/* 主功能菜单区域 */}
        <div className="user-links">
          <div className="link-item">
            <Icon type="iconbtn_mymessages" />
            <div>消息通知</div>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_mycollect" />
            <div>收藏</div>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_history1" />
            <div>浏览历史</div>
          </div>
          <div className="link-item">
            <Icon type="iconbtn_myworks" />
            <div>我的作品</div>
          </div>
        </div>
      </div>

      {/* 更多服务菜单区域 */}
      <div className="more-service">
        <h3>更多服务</h3>
        <div className="service-list">
          <div
            className="service-item"
            onClick={() => navigate('/profile/feedback')}
          >
            <Icon type="iconbtn_feedback" />
            <div>用户反馈</div>
          </div>
          <div
            className="service-item"
            onClick={() => navigate('/profile/chat')}
          >
            <Icon type="iconbtn_xiaozhitongxue" />
            <div>小智同学</div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Profile
